/**
 * Created by Tsuna Cheung on 2016/11/30.
 * Upadated by qiangqiang on 2016/12/3
 * Upadated by Tsuna Cheung on 2016/12/21
 * Upadated by Tsuna Cheung on 2017/1/17
 */
import React, {Component} from 'react';
import {
    BackAndroid,
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    Navigator,
    Platform,
} from 'react-native';

import RegisterSuccess from './RegisterSuccess'
import Header from '../component/Header'
import Button from '../component/aButton'
import {
    Kaede,
    Hoshi,
    Jiro,
    Isao,
    Madoka,
    Akira,
    Hideo,
    Kohana,
    Makiko,
    Sae,
    Fumi,
} from 'react-native-textinput-effects';

export default class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            USER_NAME : '',
            USER_ID_CARD : '',
            USER_PHONE:'',
            USER_PASSWORD : '',
            CONFIRM_USER_PASSWORD: '',
            USER_ID:''
        }
    }

    _pressbutton = ()=> {
        const {navigator} = this.props;
        if (navigator) {
            navigator.pop();
        }
    };
    
    _gotoRegisterSuccess = ()=> {
        const {navigator}=this.props;
        if (navigator) {
            navigator.push({
                name: 'RegisterSuccess',
                component: RegisterSuccess,
                params:{
                    USER_NAME:this.state.USER_NAME,
                    USER_ID:this.state.USER_ID
                }
            })
        }
    };
    
    /* react-native 生命周期里的自带方法，发生在组件出现前
     * Mount为安装，Unmout为卸载
     */
    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }
    /* Android返回键执行的操作 被之前BackAndoid组件调用*/
    onBackAndroid = () => {
        const {navigator} = this.props;
        const routers = navigator.getCurrentRoutes();
        if (routers.length > 1) {
            navigator.pop();
            return true;
        }
        return false;
    };
    /*发送注册信息，并接受JSON数据*/
    _fetchData = () => {
        let url = "http://10.1.157.200:9090/tuser/?format=json";
        fetch(url, {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                user_name: this.state.USER_NAME,
                user_id_card: this.state.USER_ID_CARD,
                user_phone: this.state.USER_PHONE,
                user_password: this.state.USER_PASSWORD
            })
        }) .then((response) => response.text())
            .then((responseText) => {
                this._judgement(responseText);
            }).catch((error) => alert(error+"请连接网络"));
    };
    /*确认信息是否填写完整，两次密码输入是否匹配*/
    _confirmPassword =()=> {
        if(this.state.USER_ID_CARD==""||this.state.USER_NAME==""||this.state.USER_PASSWORD==""||this.state.CONFIRM_USER_PASSWORD==""||this.state.USER_PHONE=="")
        {
            alert("请将信息填写完整");
        }
        else{
            if(this.state.USER_PASSWORD==this.state.CONFIRM_USER_PASSWORD) {
                this._fetchData();
            }
            else{
                alert("密码不一致");
            }
        }
    };
    /*判断是否注册成功，若注册成功跳转到注册成功页面*/
    _judgement=(responseText)=>{
        let flag='"'+"1"+ '"';
        if(responseText==flag){
            alert(responseText+"注册失败，请重试");
        }
        else{
            // this.state.USER_ID=responseText.user_id;
            // this._gotoRegisterSuccess()
            alert(responseText);
        }
    };

    render() {
        return (
            <View style={styles.container}>

                <Header name="注册"
                        function={this._pressbutton}/>

                <View style={styles.body}>
                    <View style={styles.identy}>
                        <Kaede
                            label={'真实姓名'}
                            style={styles.login_input}
                            onChangeText={(text) => {this.state.USER_NAME = text;}}
                        />

                    </View>

                    <View style={styles.identy}>
                        <Kaede
                            label={'身份证号'}
                            style={styles.login_input}
                            onChangeText={(text) => {this.state.USER_ID_CARD = text;}}
                        />
                    </View>

                    <View style={styles.identy}>
                        <Kaede
                            label={'手机号'}
                            style={styles.login_input}
                            onChangeText={(text) => {this.state.USER_PHONE = text;}}
                        />
                    </View>

                    <View style={styles.identy}>
                        <Kaede
                            label={'密码'}
                            style={styles.login_input}
                            secureTextEntry={true}
                            onChangeText={(text) => {this.state.USER_PASSWORD = text;}}
                        />
                    </View>

                    <View style={styles.identy}>
                        <Kaede
                            label={'确认密码'}
                            style={styles.login_input}
                            secureTextEntry={true}
                            onChangeText={(text) => {this.state.CONFIRM_USER_PASSWORD = text;}}
                        />
                    </View>

                    <View style={styles.extra_function}>
                        <TouchableOpacity>
                            <Text style={styles.extra_function_text}>
                                遇到问题？
                            </Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.buttonView}>
                        <Button aButtonFunction={this._confirmPassword}
                                 aButtonText="注册"/>
                    </View>

                </View>

            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#FFFFFF"
    },
    body: {
        flex: 10
    },
    identy: {
        flexDirection: 'row',
        marginTop: 30
    },
    login_input:{
        flex:1,
        marginLeft:40,
        marginRight:40
    },
    identy_text: {
        marginTop: 5,
        marginLeft: 40,
        fontSize: 20,
        flex: 1
    },
    extra_function: {
        marginTop: 20,
        marginRight: 40
    },
    extra_function_text: {
        fontSize: 15,
        color: '#AAAAAA',
        textAlign: 'right'
    },
    buttonView: {
        alignItems: 'center'
    }
});